<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/common.css">
    <link rel="stylesheet" href="/assets/css/css.css">
    <link href="/assets/css/mobiscroll.custom-3.0.0-beta.min.css" rel="stylesheet" type="text/css">
    <title>订单列表</title>
</head>
<body class="">
    <div id="message_info"></div>
    <section>
        <div class="filter-items clearfix">
            <div class="form clearfix">
                <div class="col-xs-6">
                    <input class="form-control flatpickr" data-date-format="Y-m-d" id="startDate" placeholder="起始日期">
                </div>
                <div class="col-xs-6">
                    <input class="form-control flatpickr" data-date-format="Y-m-d" id="endDate" placeholder="结束日期">
                </div>
            </div>
            <div class="form clearfix">
                <div class="col-xs-6">
                    <input type="tel" class="form-control" id="orderId" placeholder="订单号">
                </div>
                <div class="col-xs-6 text-center">
                    <div class="btn-group">
                        <select id="orderStatus" class="btn btn-default">
                            <option value="0">已确认</option>
                            <option value="2">已配货</option>
                            <option value="1">已完成</option>
                            <option value="3">已取消</option>
                            <option value="9">已失效</option>
                        </select>
                        <button type="button" class="btn btn-warning" id="queryResult">查询</button>
                    </div>
                </div>
            </div>

        </div>
        <div class="order-list">
            <div id="orderList">
                <!--<div class="order-item">
                    <div class="order-number container box">
                        <div>20161010000001</div>
                        <div class="text-right">2016-10-12 09:00:00</div>
                    </div>
                    <div class="order-content box">
                        <div class="">陈玲</div>
                        <div class=""><a href="tel:15895821136">15895821136</a></div>
                        <div class="text-right btn-group">
                            <button class="btn btn-danger btn-sm" typeb="button">配送</button>
                            <button class="btn btn-success btn-sm confirm-order" type="button">确认</button>
                        </div>
                    </div>
                    <div class="order-address container">江苏省南京市鼓楼区凤凰西街223号1幢204室</div>
                </div>-->
            </div>
            <div class="orderMore hidden" data-page="0" data-total="0">
                <span class="glyphicon glyphicon-chevron-down"></span>加载更多
            </div>
        </div>
    </section>
    <script src="/assets/js/jquery-1.10.2.min.js"></script>
    <script src="/assets/js/jquery.mobile.custom.js"></script>
    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/assets/js/public.js"></script>
    <script src="/assets/js/mobiscroll.custom-3.0.0-beta.min.js"></script>
    <script src="/assets/js/layer/mobile/layer.js"></script>
    <script>
        $(function () {
            //初始化配置参数
            $('#startDate').mobiscroll().calendar({
                theme: 'mobiscroll',
                lang: 'zh',
                display: 'bottom',
                dateFormat: 'yy-mm-dd'
            });
            $('#endDate').mobiscroll().calendar({
                theme: 'mobiscroll',
                lang: 'zh',
                display: 'bottom',
                dateFormat: 'yy-mm-dd'
            });
            var startDate = $('#startDate').val();
            var endDate = $('#endDate').val();
            var orderId = $('#orderId').val();
            var orderStatus = $('#orderStatus').val();
            var limit = 1000;
            var data = JSON.stringify({
                "order_id":orderId,
                "start_date":startDate,
                "end_date":endDate,
                "state":orderStatus,
                "page":1,
                "limit":limit
            });
            orderList(data,1);


            //查询
            $('#queryResult').on('tap', function(e){
                e.preventDefault();
                e.stopPropagation();
                var d = JSON.stringify({
                    "order_id":$('#orderId').val(),
                    "start_date":$('#startDate').val(),
                    "end_date":$('#endDate').val(),
                    "state":$('#orderStatus').val(),
                    "page":1,
                    "limit":limit
                });
                orderList(d,1);
            });

            //翻页
            $('.orderMore').on('tap', function(e){
                e.preventDefault();
                e.stopPropagation();
                var totalPage = parseInt($(this).attr('data-total'));
                var page = parseInt($(this).attr('data-page'));
                if(page + 1 > totalPage){
                    showError('没有更多数据');
                    $(this).addClass('hidden');
                    return false;
                }else{
                  page++;
                }
                var d = JSON.stringify({
                    "order_id":$('#orderId').val(),
                    "start_date":$('#startDate').val(),
                    "end_date":$('#endDate').val(),
                    "state":$('#orderStatus').val(),
                    "page":page,
                    "limit":limit
                });
                orderList(d,page);
            });

            $(document).on('tap', '.modify-status', function(e){
                e.stopPropagation();
                e.preventDefault();
                var order_num = $(this).parent().attr('data-number');
                var operation = $(this).attr("data-fld");
                var data = {literal}{operation:operation,order_num:order_num}{/literal}
                $.ajax({
                    type:"patch",
                    url:"/api/order/order",
                    async:false,
                    dataType:"json",
                    data:data,
                    success:function(data){
                        if(data.success == true){
                            alert(data.errorMessage);
                            location.reload();
                            return false;
                        }else{
                            showError(data.errorMessage);
                            return false;
                        }
                    }
                });
            });
           	$(document).on('tap', '#complete', function(e){
            	e.stopPropagation();
            	e.preventDefault();
            	var $this = $(this);
	         	layer.open({
	         		content: '确定要完成订单吗？'
	         		,btn: ['确定', '不要']
	         		,yes: function(index){
	         			var order_num = $this.parent().attr('data-number');
	                    var operation = $this.attr("data-fld");
	                    var data = {literal}{operation:operation,order_num:order_num}{/literal}
                    	$.ajax({
                            type:"patch",
                            url:"/api/order/order",
                            async:false,
                            dataType:"json",
                            data:data,
                            success:function(data){
                                if(data.success == true){
                                	layer.close(index);
                                    alert(data.errorMessage);
                                    location.reload();
                                    return false;
                                }else{
                                	layer.close(index);
                                    showError(data.errorMessage);
                                    return false;
                                }
                            }
                        });
	         			}
	         	});
			});

        });

        function orderList(data,page){
             $.ajax({
                 url:'/api/order/order_list?d='+data,
                 type:'get',
                 dataType:'json',
                 beforeSend:function(){
                     showFishLoading();
                 },
                 error:function(){
                    showError('请稍后再试');
                     hideFishLoading();
                    return false;
                 },
                 success:function(json) {
                     if (json.success === true) {
                         $('.orderMore').attr('data-total', json.data.total_page);
                         $('.orderMore').attr('data-page', page);
                         if(json.data.total_page < 1 || page == json.data.total_page){
                             $('.orderMore').addClass('hidden');
                         }else{
                             $('.orderMore').removeClass('hidden');
                         }
                         var list = json.data.list;
                         if(list.length > 0){
                             var str = '';
                             for (var i = 0; i < list.length; i++) {
                                 str += '' +
                                         '<div class="order-item tap" data-href="/wechat/member/order_detail/'+ list[i].order_num +'">' +
                                             '<div class="order-number container box">' +
                                                 '<div>' + list[i].order_num + '</div>' +
                                                 '<div class="text-right">' + list[i].deliver_time + '</div>' +
                                             '</div>' +
                                             '<div class="order-content box">' +
                                                '<div>' + list[i].receiving + '<a href="tel:'+ list[i].phone +'">' + list[i].phone + '</a></div>';
                                                switch(list[i].status){
                                                    case "0":
                                                        str +=  '' +
                                                                '<div class="text-right" data-number="'+ list[i].order_num +'">' +
                                                                    '<!--<button class="btn btn-danger btn-sm modify-status" typeb="button" data-fld="distribut">配　送</button>-->　' +
                                                                    '<button  id="complete" class="btn btn-success btn-sm" type="button" data-fld="complete">完　成</button>' +
                                                                '</div>';
                                                        break;
                                                    case "2":
                                                        str +=  '' +
                                                                '<div class="text-right" data-number="'+ list[i].order_num +'">' +
                                                                '<button  id="complete" class="btn btn-success btn-sm" type="button" data-fld="complete">完　成</button>' +
                                                                '</div>';
                                                        break;
                                                    default:
                                                        str += '';
                                                        break;
                                                }
                                         str += '</div>' +
                                             '<div class="order-address container">' + list[i].address + '</div>' +
                                         '</div>';
                             }
                             if(page == 1){
                                 $("#orderList").html(str);
                             }else{
                                 $(str).appendTo("#orderList");
                             }
                         }else{
//                           $('#orderList').html("<div style='background-color:#fff;text-align:center;font-size:15px;'>暂无数据</div>");
                             if(page != 0) {
                                showError('没有更多数据');
                             }
                         }
                         hideFishLoading();
                     }
                 }
             });
        }
    </script>
</body>
</html>